<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1> 计算属性的使用  把函数当作 data里面定义 属性变量使用</h1>
        <div>  {{ getMsg}}</div>

     <h1> 求和: {{totalNum}}</h1>
     <h1> 求和: {{totalNum}}</h1>


     <hr>

   <h2>  下面是 methods方法 的值</h2>
   <h2 style="color: red;">  {{getMsg1()}}</h2>
   <h2 style="color: green;">  {{getMsg1()}}</h2>
    </div>
    <script>
     let  vm=   new Vue({
            el: '#app',
            data: {
                num:100

            },

            methods:{
                // methods 没有缓存 

                getMsg1() {
                    console.log('methods');
                    return ' 我是 methods 方法的返回值'
                }
            },

            // 计算属性的函数必须要有返回值
            //   一般使用场景 是购物车
            // 计算属性 有缓存功能   
            // 只有依赖data里面的数据发生变化了后 那么computed 会重新执行  
            // 而且 是响应式的


            computed:{
               getMsg() {
                   return 'hello     明天 玩得开心'
               },

  
                totalNum() {
                    console.log('computed');

                     let add=0;
                     for(var i=1;i<=this.num;i++) {
                         add+=i
                     }

                     return  add
                }
            }
        })
    //   setTimeout(()=>{
    //       vm.num=10;

    //   },2000)

    </script>
</body>

</html>